var pccEle = document.querySelector('#pcc-box')
var isDirectly = false //是否是直辖市 
_data.forEach((item, index) => {
	// province
	var opt = document.createElement('option')
	opt.value = item.name
	opt.innerText = item.name
	pccEle.children[0].appendChild(opt)

	if (item.children && index == 0) {
		item.children.forEach((item1, index) => {

			// city
			var opt = document.createElement('option')
			opt.value = item1.name
			opt.innerText = item1.name
			pccEle.children[1].appendChild(opt)

			if (item1.children && index == 0) {
				item1.children.forEach((item2, idx2) => {
					// area
					var opt = document.createElement('option')
					opt.value = item2.name
					opt.innerText = item2.name
					pccEle.children[2].appendChild(opt)
				})
			}

			if (item1.area && index == 0) {
				isDirectly = true
			}
		})
	}
})
if (isDirectly) {
	Array.from(pccEle.children[1].children).forEach(item => {
		pccEle.children[2].appendChild(item)
	})
	let selectedNode = Array.from(pccEle.children[0].children).filter(item => {
		return item.selected
	})
	if (selectedNode) {
		var provinceNode = selectedNode[0].cloneNode(true)
		pccEle.children[1].appendChild(provinceNode)
	}
	isDirectly = false
}
pccEle.children[0].onchange = function() {
	Array.from(pccEle.children[1].children).forEach(item => {
		item.remove()
	})
	Array.from(pccEle.children[2].children).forEach(item => {
		item.remove()
	})
	var provincename = pccEle.children[0].value
	var arrData = _data.filter((item) => {
		return item.name == provincename
	})
	arrData[0].children.forEach((item1, index) => {

		// city
		var opt = document.createElement('option')
		opt.value = item1.name
		opt.innerText = item1.name
		pccEle.children[1].appendChild(opt)

		if (item1.children && index == 0) {
			item1.children.forEach((item2, idx2) => {
				// area
				var opt = document.createElement('option')
				opt.value = item2.name
				opt.innerText = item2.name
				pccEle.children[2].appendChild(opt)
			})
		}

		if (item1.area && index == 0) {
			isDirectly = true
		}
	})
	if (isDirectly) {
		Array.from(pccEle.children[1].children).forEach(item => {
			pccEle.children[2].appendChild(item)
		})
		let selectedNode = Array.from(pccEle.children[0].children).filter(item => {
			return item.selected
		})
		if (selectedNode) {
			var provinceNode = selectedNode[0].cloneNode(true)
			pccEle.children[1].appendChild(provinceNode)
		}
		isDirectly = false
	}
}
pccEle.children[1].onchange = function() {
	Array.from(pccEle.children[2].children).forEach(item => {
		item.remove()
	})
	var provincename = pccEle.children[0].value
	var cityname = pccEle.children[1].value
	_data.find((item) => {
		var city = null
		if (item.name == provincename) {
			city = item.children.find(item => {
				return item.name == cityname
			})
			city.children.forEach((item2, idx2) => {
				// area
				var opt = document.createElement('option')
				opt.value = item2.name
				opt.innerText = item2.name
				pccEle.children[2].appendChild(opt)
			})
		}
		return city
	})
}
